<script setup>
import { ref } from 'vue';
import { api } from '../boot/api';
import { useRouter } from 'vue-router';
const router = useRouter();
let channelId = ref('')
let generateId = () => {
    api.get('/channel/generate_channel_id').then(res => {
        let response = res.data;
        channelId.value = response.data;
        console.log(channelId.value)
        my_modal_1.showModal()
    })
}
let checkChannel = (channel) => {
    return api.get('/channel/single_channel/' + channel).then(res => {
        let response = res.data;
        return response
    })
}
const goTo = () => {
    let code = channelId.value
    checkChannel(code).then(res => {
        if (res.code !== 200) {
            alert('error code ')
        } else {
            api.get('/channel/incr_or_decr?'+new URLSearchParams({channel_id:code,num:0})).then(res=>{
                let response = res.data
                if(response.code ===200){
                    router.push({
                name: 'IndexView',
                query: { 'channel': code }
            })
                }
            })

        }
    })

}

let showModal = () => {
    my_modal_2.showModal()
}
</script>
<template>
    <div class="w-full h-full flex justify-center place-items-center">
        <div class="card w-96 bg-base-100 shadow-xl">
            <div class="card-body space-y-4">
                <h2 class="card-title flex justify-center">生成channel ID</h2>
                <p>
                    系统会自动生成一个6位的channel ID作为你的通道号，
                    不同设备可以利用同一个ID进入同一个频道，
                    当创建后默认频道里人数为1，
                    不同设备加入后计数器将增加，若计数器为0
                    即所有设备都退出时，会自动释放里面的所有资源
                </p>
                <div class="card-actions justify-between">
                    <button class="btn btn-primary" @click="generateId">生成频道 ID</button>
                    <button class="btn btn-neutral" @click="showModal">加入已有频道</button>
                </div>
            </div>
        </div>
        <dialog id="my_modal_1" class="modal">
            <form method="dialog" class="modal-box">
                <h3 class="font-bold text-lg">Your ID is below!</h3>

                <div class=" flex justify-center gap-5 text-center auto-cols-max">
                    <div v-for="item in channelId.split('')"
                        class="flex justify-center flex-col p-2 bg-neutral rounded-box text-neutral-content">
                        <span class=" font-mono text-5xl">
                            <span>{{ item }}</span>
                        </span>
                    </div>

                </div>

                <div class="modal-action">
                    <!-- if there is a button in form, it will close the modal -->
                    <button class="btn btn-primary" @click="goTo"> enter</button>
                    <button class="btn">Close</button>
                </div>
            </form>
        </dialog>
        <dialog id="my_modal_2" class="modal">
            <form method="dialog" class="modal-box">
                <h3 class="font-bold text-lg">Enter code </h3>
                <form class="flex items-center">
                    <label for="simple-search" class="sr-only">Search</label>
                    <div class="relative w-full">
                        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                            <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor"
                                viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd"
                                    d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
                                    clip-rule="evenodd"></path>
                            </svg>
                        </div>
                        <input type="text" id="simple-search"
                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                            placeholder="Search" v-model="channelId" required>
                    </div>
                </form>
                <div class="modal-action">
                    <!-- if there is a button in form, it will close the modal -->
                    <button class="btn btn-primary" @click="goTo"> enter</button>
                    <button class="btn">Close</button>
                </div>
            </form>
        </dialog>


    </div>
</template>
<style scoped></style>